<template>
  <a-modal
    :title="pop.title"
    v-model="pop.isShow"
    :maskClosable="false"
    :width="pop.width"
    @cancel="close"
    @ok="onPopSubmit"
    :confirmLoading="pop.loading"
  >
    <a-form :form="editForm" ref="form_user">
      <a-form-item
        label="导入数据"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 14 }"
      >
        <a-upload
          v-decorator="[
            'file',
            { rules: [{ required: true, message: '请上传文件!' }] }
          ]"
          name="file"
          :multiple="true"
          :beforeUpload="beforeUpload"
          :remove="remove"
          :fileList="fileList"
          @change="handleChange"
        >
          <a-button> <a-icon type="upload" /> 上传文件 </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { page } from "@/api";

export default {
  data() {
    return {
      pop: {
        title: "文件导入",
        isShow: false,
        loading: false,
        width: 600
      },
      editForm: null,
      file: null,
      fileList: [],
      tableEname: ""
    };
  },
  // watch: {
  //   show (value) {
  //     this.editForm = this.$form.createForm(this)
  //     this.pop.isShow = value
  //   }
  // },
  methods: {
    show(tName) {
      // debugger
      this.editForm = this.$form.createForm(this);
      this.pop.isShow = true;
      this.tableEname = tName;
    },
    handleChange(info) {
      let fileList = [...info.fileList];
      fileList = fileList.slice(-1);
      fileList = fileList.map(file => {
        if (file.response) {
          // Component will show file.url as link
          file.url = file.response.url;
        }
        return file;
      });
      this.fileList = fileList;
    },
    close() {
      this.$emit("close");
      this.remove();
      this.fileList = [];
    },
    beforeUpload(file, fileList) {
      this.file = file;
      return false;
    },
    onPopSubmit() {
      this.editForm.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (this.file) {
            // debugger;
            let formData = new FormData();
            formData.append("file", this.file);
            formData.append("tableName", this.tableEname);
            this.pop.loading = true;
            // let params = { tableName: this.tableEname, file: formData };
            page
              .importTableSourceByCSV(formData)
              .then(res => {
                if (res.data.code === -1) {
                  this.$message.warning(res.data.message);
                  this.pop.loading = false;
                } else {
                  this.pop.loading = false;
                  this.remove();
                  this.fileList = [];
                  this.$message.success("导入成功！");
                  this.pop.isShow = false;
                }
              })
              .catch(() => {
                this.$message.warning("导入失败");
                this.pop.loading = false;
              });
            // systemConfigurat
            //   .importFile(formData)
            //   .then(res => {
            //     let datas = res.data.data;
            //     this.pop.loading = false;
            //     this.remove();
            //     this.fileList = [];
            //     this.$emit("close", datas);
            //   })
            //   .catch(() => {
            //     this.pop.loading = false;
            //   });
          } else {
            this.$message.warning("请上传文件！");
          }
        }
      });
    },
    remove() {
      this.file = null;
    }
  }
};
</script>
